<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        ul li {
            float: left;
        }
        li:hover {
            cursor: pointer;
        }
        .clearfix::after {
            display: block;
            width: 0;
            height: 0;
            visibility: hidden;
        }
        section {
            display: none;
        }
        .text{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <div class="nav">
                <ul class="clearfix">
                    <li><span id="1" style="border: 1px solid black;margin-right: 20px;">标题1<button style="border: none;background:none;">+</button></span></li>
                    <li><span id="2" style="border: 1px solid black;margin-right: 20px;">标题2<button style="border: none;background:none;">+</button></span></li>
                    <li><span id="3" style="border: 1px solid black;margin-right: 20px;">标题3<button style="border: none;background:none;">+</button></span></li>
                </ul>
            </div>
            <div style="position: fixed;top:0;right: 50%;">
                <button id="add">增加</button>
            </div>
        </div>
        <div class="content" style="border: 2px solid red;width:1000px;height:500px;text-align:center;">
            <section class="text" id="t1">内容1</section>
            <section id="t2">内容2</section>
            <section id="t3">内容3</section>
        </div>
    </div>

    <script>
        // 想要实现的功能：  通过面向对象的思想去写  先找出对象。找出对象具有的属性和功能。再创建相应的类，再实例化类
        // 1，点击tab切换页内容区域；
        // 2，点击添加按钮添加新的tab;
        // 3，点击关闭按钮删除相应的tab页；
        // 4，双击标题或内容区域可以修改；
        var that = this;

        class Tabs {//tab对象有新增，修改，删除，切换功能
            constructor() {
                this.add = document.getElementById('add');
                this.add.onclick = this.addTab;//当按钮点击时，执行add函数。新增一条tab
                console.log('111');
                // this.init();
                this.ul = document.querySelector('ul');
                console.log(this.ul);
                this.ul.onclick = function (ev) {//将事件委托给父元素ul，事件绑定在父元素上
                    alert('ul发生点击')
                    var ev = ev;// || window.event;//兼容IE
                    var target = ev.target;// || ev.srcElement;//兼容IE
                    console.log(target.nodeName.toLocaleLowerCase());
                    if(target.nodeName.toLocaleLowerCase() == 'span'){
                        alert('判断点击的是哪个span')
                        switch(target.id){
                            case '1' ://根据ID名定位到真正的目标元素触发相应事件
                                alert('点击标签1')
                                this.toggleT(t1);
                                break;
                            case '2' :
                                alert('点击标签2')
                                this.toggleT(t2);
                                break;
                            case '3' :
                                alert('点击标签3')
                                this.toggleT(t3);
                                break;
                        }
                    }
                }
            }
            init(){
                //初始化操作，让相关的元素绑定事件
            }
            addTab() {//新增一条tab
                console.log('新增一条tab')
            }
            toggleT(id){//点击tab切换相应tab内容
                alert('切换')
                console.log(id);
                this.delAll();//先把所有类名清空，再给相应内容加上类名
                console.log(id.class);
                // document.getElementById('id').class='text';
            }
            removeT(){
                //删除
            }
            editT() {
                //修改
            }
            delAll() {
                alert('清空类，让内容区域空白');
                let secs = document.getElementsByTagName('section');
                console.log(secs);
                console.log(document.body.classList);
                
                for(var i = 0;i<secs.length;i++) {
                    console.log(secs[i]);
                    secs[i].classList.remove('text');//移除类名
                    // secs[i].classList.toggle('text');//无类名则返回true，有类名则移除并返回false。
                }
            }
        }
        var ele = new Tabs();

        



    </script>
</body>
</html>